<template>
  <div class="foot_nav cl" v-show="songs_detail_flag">
    <div class="main">
      <div class="left cl" v-if="song_detail_flag" @click="jump_detail()">
        <div class="img">
          <img v-lazy="song_detail_data.songs[0].al.picUrl" alt />
        </div>
        <div class="dec">
          <p>{{song_detail_data.songs[0].name}}</p>
          <p>
            <span v-for="(item,index) in song_detail_data.songs[0].ar" :key="index">
              {{item.name}}
              <span v-if="index<song_detail_data.songs[0].ar.length-1">/</span>
            </span>
          </p>
        </div>
      </div>
      <div class="right cl">
        <div class="foot_canvas">
          <i
            class="playPause"
            :class="[playPause_data==true ? 'play':'pause']"
            @click.stop="playPause()"
          ></i>
          <canvas ref="foot_canvas" id="foot_canvas" width="100" height="100"></canvas>
        </div>
        <i class="list" @click="list_click()"></i>
      </div>
    </div>
    <v-song-list
      ref="songList"
      :showFlag="isSongList"
      @childEvent="parentMethod"
      :song_id="song_id"
    ></v-song-list>
    <v-song-check-pop v-show="!song_check_data.success" :message="song_check_data.message"></v-song-check-pop>
  </div>
</template>
<script>
import { mapState } from "vuex";
import vSongList from "@/components/song_list";
import vSongCheckPop from "../components/song_check_pop";
export default {
  components: {
    vSongList,
    vSongCheckPop
  },
  data() {
    return {
      isSongList: false,
      music: document.getElementById("audio"),
      canvas: this.$refs.foot_canvas,
      song_id: null
    };
  },
  computed: {
    ...mapState("song_detail", [
      "song_detail_data",
      "songs_detail_data",
      "songs_detail_flag",
      "song_detail_flag"
    ]),
    ...mapState("song_check", ["song_check_data"]),
    ...mapState("song_status", ["playPause_data"]),
    ...mapState("play_rule", ["play_rule_flag"])
  },
  watch: {
    songs_detail_flag(newVal) {}
  },
  mounted() {
    if (localStorage.song_list_id && !this.music.src) {
      let list = JSON.parse(localStorage.song_list_id);
      let c_list = [];
      for (let key in list) {
        if (list.hasOwnProperty(key)) {
          let element = list[key];
          c_list.push(element.id);
        }
      }
      this.$store.dispatch("song_detail/getSongsDetailData", {
        ids: c_list.join(",")
      });
      if (list.length) {
        this.$store
          .dispatch("song_detail/getSongDetailData", {
            ids: list[0].id
          })
          .then(data => {
            this.$store
              .dispatch("song_url/getSongUrlData", {
                id: list[0].id,
                br: "999000"
              })
              .then(data => {
                localStorage.songIsPlayId = list[0].id;
                if (!this.music.src) {
                  this.music.src = data.data[0].url;
                } else {
                  if (this.music.src == data.data[0].url) {
                    this.showPlayPause();
                  } else {
                    this.music.src = data.data[0].url;
                  }
                }
              });
          });
      }
    }
    this.canvas = this.$refs.foot_canvas;
    this.music.addEventListener("canplay", () => {
      this.showPlayPause();
      //绑定timeupdate事件
    });
    this.music.addEventListener("timeupdate", this.timeupdate, false);
    this.timeupdate();
  },
  methods: {
    showPlayPause() {
      this.canvas = this.$refs.foot_canvas;
      if (!this.music.paused) {
        this.$store.commit("song_status/setPlayPause", true);
      } else {
        this.$store.commit("song_status/setPlayPause", false);
        if (this.canvas) {
          this.timeupdate();
        }
      }
    },
    parentMethod({ showFlag }) {
      this.isSongList = false;
    },
    list_click() {
      this.isSongList = true;
      this.$refs.songList.scrollList();
      // if (!localStorage.song_list_id || localStorage.song_list_id == "[]") {
      //   this.isSongList = false;
      // } else {
      //   this.isSongList = true;
      // }
    },
    jump_detail() {
      this.$store
        .dispatch("song_check/getSongCheckData", {
          id: this.song_detail_data.songs[0].id
        })
        .then(value => {
          if (value) {
            this.$router.push({
              path: "/song_detail",
              query: { ids: this.song_detail_data.songs[0].id }
            });
          }
        });
    },
    playPause() {
      this.canvas = this.$refs.foot_canvas;
      // 改变暂停/播放icon
      if (this.music.paused) {
        let playPromise = this.music.play();
        if (playPromise !== undefined) {
          playPromise
            .then(_ => {
              this.music.play();
              this.timeupdate();
              this.$store.commit("song_status/setPlayPause", true);
            })
            .catch(error => {});
        }
      } else {
        this.music.pause();
        this.drawCircle(this.canvas, 0, "#000", "#ff2d0f");
        this.$store.commit("song_status/setPlayPause", false);
      }
    },
    timeupdate() {
      this.canvas = this.$refs.foot_canvas;
      if (!isNaN(this.music.duration) && this.canvas != undefined) {
        var progressValue = this.music.currentTime / this.music.duration; //用时间比来获取进度条的值
        if (progressValue == 1) {
          progressValue = 0; //当播放完成，进度条为0
        }
        if (this.music.paused) {
          this.drawCircle(this.canvas, progressValue, "#000", "#ff2d0f");
        } else {
          this.drawCircle(this.canvas, progressValue, "#ccc", "#ff2d0f");
        }
      }
    },
    drawCircle(cv, percentage, color, act_color) {
      var canvasWidth = cv.width * 1;
      cv.height = cv.height * 1;
      var innerR = canvasWidth * 0.8 * 0.5; //半径
      var ctx;
      if (cv.getContext) {
        ctx = cv.getContext("2d");
      }
      ctx.translate(canvasWidth / 2, canvasWidth / 2);
      ctx.beginPath();
      ctx.arc(0, 0, innerR, 0, Math.PI * 2, false);
      ctx.lineWidth = 2; //圆环宽度
      ctx.strokeStyle = color;
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(
        0,
        0,
        innerR,
        (Math.PI * 3) / 2,
        (Math.PI * 3) / 2 + (Math.PI * 2) / 180 + percentage * Math.PI * 2,
        false
      );
      ctx.lineWidth = 2; //圆环宽度
      ctx.strokeStyle = act_color;
      ctx.stroke();
    }
  }
};
</script>

<style lang="scss" scoped>
.foot_nav {
  .main {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 1000;
    border-top: 0.01rem solid #eee;
    padding: 0.15rem;
    .left {
      float: left;
      width: 5.2rem;
      .img {
        float: left;
        width: 0.7rem;
        height: 0.7rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .dec {
        width: 4.2rem;
        margin-left: 0.1rem;
        float: left;
        font-size: 0.26rem;
        text-align: left;
        p:first-child {
          font-size: 0.3rem;
          line-height: 0.4rem;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        p:last-child {
          font-size: 0.24rem;
          line-height: 0.3rem;
          color: #666;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
    .right {
      float: right;
      margin-top: 0.12rem;
      position: relative;

      i.list {
        background: url(../images/list.png) no-repeat;
        background-size: 100% 100%;
        width: 0.48rem;
        height: 0.48rem;
        margin-right: 0.1rem;
        float: right;
      }
      .foot_canvas {
        font-size: 0;
        position: absolute;
        top: -0.07rem;
        right: 0.94rem;
        z-index: 0;
        width: 0.6rem;
        height: 0.6rem;
        canvas {
          width: 100%;
          height: 100%;
        }
        i.playPause {
          width: 0.3rem;
          height: 0.3rem;
          display: inline-block;
          margin-right: 0.3rem;
          position: absolute;
          top: 0.15rem;
          left: 0.17rem;
        }
        i.play {
          background: url(../images/play_r.png) no-repeat;
          background-size: 100% 100%;
        }
        i.pause {
          background: url(../images/pause.png) no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>